import React,{useEffect,useState} from 'react'

import { useDispatch,useSelector } from 'react-redux'
import { ProductCard, SubmitBar, Checkbox ,Button ,Image,NavBar} from 'react-vant';
import * as api from '../../api/index'
import HocLogin from '../../utile/HocLogin'
function Cart() {
  const dispatch=useDispatch();
  const [visible, setVisible] = useState(false);
  const shop_cart = useSelector(state=>state.reducer.shopCart)
  console.log(shop_cart)

  const addNum =(item)=>{
    dispatch(api.add_shopcar_count(item))
  }

  return (
    <div>
        <NavBar title={'购物车'} />
        {
          shop_cart &&shop_cart.length>0? shop_cart.map((item,index)=>{
            return <ProductCard
            num={item.count}
            price={item.price}
            desc={item.detail}
            title={item.title}
            thumb={

            <div style={{display:"flex"}} >
              <div>
                <Checkbox checked={item.checked}  shape="square" name="c1"/>
              </div>
                <Image lazyload src={item.img}/>
            </div>
           }
            key={index}
            footer={
              <>
                <Button onClick={()=>{addNum(item)}}>+</Button>
                <Button>-</Button>
              </>
            }
          />
          }):'购物车暂无数据'
        }
        
    </div>
  )
}

export default HocLogin(Cart)